<template>
  <div class="q-pa-md q-gutter-sm">
    <q-btn label="Maximized" color="primary" @click="dialog = true" />

    <q-dialog
      v-model="dialog"
      persistent-
      :maximized="maximizedToggle"
      transition-show="slide-left"
      transition-hide="slide-right"
    >
      <q-card>
        <div class="column" style="height: 100%">
          <div class="col-auto">
            <q-card-section class="q-px-none q-py-sm">
              <q-input dense filled bottom-slots v-model="text">
                <template v-slot:before>
                  <q-btn
                    flat
                    round
                    dense
                    icon="arrow_back_ios"
                    @click="dialog = false"
                  />
                </template>

                <template v-slot:prepend>
                  <q-icon name="search" />
                </template>

                <template v-slot:after>
                  <q-btn flat dense label="搜索" @click="updateScrollTarget" />
                </template>
              </q-input>
            </q-card-section>
            <q-card-section class="q-pa-sm"> 搜索结果：共527条 </q-card-section>
          </div>
          <div
            class="col"
            id="refScrollTargetId"
            ref="refScrollTargetId"
            style="overflow: auto; height: 100%"
          >
            <q-card-section>
              <q-pull-to-refresh @refresh="refresh">
                <q-infinite-scroll
                  ref="refInfiniteScroll"
                  @load="onLoad"
                  :scroll-target="refScrollTargetId"
                  :offset="250"
                >
                  <div
                    v-for="(item, index) in items"
                    :key="index"
                    class="caption"
                  >
                    <p
                      >Lorem ipsum dolor sit amet consectetur adipisicing elit.
                      Rerum repellendus sit voluptate voluptas eveniet porro.
                      Rerum blanditiis perferendis totam, ea at omnis vel
                      numquam exercitationem aut, natus minima, porro labore.</p
                    >
                  </div>
                  <template v-slot:loading>
                    <div class="row justify-center q-my-md">
                      <q-spinner-dots color="primary" size="40px" />
                    </div>
                  </template>
                </q-infinite-scroll>
              </q-pull-to-refresh>
            </q-card-section>
          </div>
          <!-- <div class="col-a   -->
        </div>
        <!-- <div class="">
      <q-card-section>
        asdfasdf
      </q-card-section>
      <q-card-section>
        asdfasdf
      </q-card-section>
      <q-card-actions>
        <q-btn flat>Action 1</q-btn>
        <q-btn flat>Action 2</q-btn>
      </q-card-actions>
      </div> -->
      </q-card>

      <!--
          <div class="text-white">
                <q-btn dense flat icon="close" v-close-popup>
            <q-tooltip class="bg-white text-primary">Close</q-tooltip>
          </q-btn>
          </div> -->
      <!-- <q-card class="text-white">
        <q-bar>
          <q-space />
          <q-btn dense flat icon="minimize" @click="maximizedToggle = false" :disable="!maximizedToggle">
            <q-tooltip v-if="maximizedToggle" class="bg-white text-primary">Minimize</q-tooltip>
          </q-btn>
          <q-btn dense flat icon="crop_square" @click="maximizedToggle = true" :disable="maximizedToggle">
            <q-tooltip v-if="!maximizedToggle" class="bg-white text-primary">Maximize</q-tooltip>
          </q-btn>
          <q-btn dense flat icon="close" v-close-popup>
            <q-tooltip class="bg-white text-primary">Close</q-tooltip>
          </q-btn>
        </q-bar>
<div class="text-h6">Alert</div>
        <q-card-section>
          <div class="text-h6">Alert</div>
        </q-card-section>

        <q-card-section class="q-pt-none">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum repellendus sit voluptate voluptas eveniet porro. Rerum blanditiis perferendis totam, ea at omnis vel numquam exercitationem aut, natus minima, porro labore.
        </q-card-section>
      </q-card> -->
    </q-dialog>
  </div>
</template>

<script>
  import { ref, nextTick } from 'vue';

  export default {
    setup() {
      const items = ref([{}, {}, {}, {}, {}, {}, {}]);
      const refInfiniteScroll = ref(null);
      const refScrollTargetId = ref(null);
      return {
        dialog: ref(false),
        maximizedToggle: ref(true),
        items,
        refInfiniteScroll,
        refScrollTargetId,
        updateScrollTarget() {
          refInfiniteScroll.value.updateScrollTarget();
        },
        refresh(done) {
          setTimeout(() => {
            items.value = [{}, {}, {}, {}, {}, {}, {}];
            done();
            nextTick(() => refInfiniteScroll.value.updateScrollTarget());
          }, 2000);
        },
        onLoad(index, done) {
          setTimeout(() => {
            items.value.push({}, {}, {}, {}, {}, {}, {});
            done();
          }, 2000);
        },
      };
    },
  };
</script>
